<template>
    <div style="width: 100%; height: 100%; background-color: #fff; overflow: visible; ">
        <h3 style="padding: 15px; background-color: #383838; color: #fff; ">
            {{ dataForm.questionTopic }}
            <div style="font-size: 14px;">被评估人: {{ dataForm.assessedName }}</div>
        </h3>
        <a-spin :spinning="loading">
            <div style="padding: 15px; font-size: 14px; padding-bottom: 40px; ">
                <div v-for="(item, index) in dataForm.assessList" :key="index">
                    <div
                        style="position: relative; padding: 5px; margin-bottom: 10px; background-color: rgba(233, 233, 233, 1)">
                        {{ (index + 1) + '. ' + item.assessDetail }}
                        <div class="is-rating" v-if="item.isRating === 2">
                            <a-button type="primary" shape="round" size="small">不计分</a-button>
                        </div>
                    </div>
                    <a-radio-group v-model="item.scoreKey" button-style="solid" style="width: 100%; "
                        @change="(event) => changeRadio(event, item)">
                        <a-row :gutter="[10, 10]">
                            <a-col :xs="12" :sm="12" :md="8" :lg="8" :xl="6" v-for="(t, i) in item.newList">
                                <!--                  item.isRating === 1 ? item.assessScore.split(',')[i] :-->

                                <a-radio-button :value="t.key"
                                    style="width: 100%; height: 50px; text-align: center; line-height: 50px; ">
                                    {{ t.value }}
                                </a-radio-button>
                            </a-col>
                        </a-row>
                    </a-radio-group>
                </div>
                <a-button type="primary" block style="margin: 20px 0" :disabled="disabled"
                    @click="showDialog">提交</a-button>
            </div>
        </a-spin>
        <div :style="{
            position: 'fixed',
            right: 0,
            bottom: 0,
            width: '100%',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1,
        }">
            <a-button-group style="width: 100%; height: 40px; ">
                <a-button type="link" style="width: 34%; height: 100%; background-color: #E5E5E5; color: #505050"
                    @click="goList">问卷清单
                </a-button>
                <a-button type="link" style="width: 34%; height: 100%; background-color: #E5E5E5; color: #505050"
                    @click="openDescription">问卷说明
                </a-button>
                <a-button type="link" style="width: 34%; height: 100%; background-color: #E5E5E5; color: #505050"
                    @click="goLogout">退出登录
                </a-button>
            </a-button-group>
        </div>
        <a-modal title="提示" style="width: 80%;height:80%" centered :visible="visibleShow" @ok="handleOk"
            @cancel="visibleShow = false" okText="确定" cancelText="取消">
            <p>您的总成绩为：<b>{{ resultNum }}</b></p>
        </a-modal>
    </div>
</template>

<script>
import store from '@/store'
import { getAction, postAction } from '@/api/manage'
import { mapActions } from 'vuex'

export default {
    name: "assessment-answer",
    data() {
        return {
            resultNum: 0,
            visibleShow: false,
            loading: false,
            disabled: false,
            queryParam: {
                appraiserPhone: '',
                assessedId: '',
                questionId: '',
            },
            dataForm: {},
            url: {
                getInfo: '/appraise/getAppraiseDetail',
                save: '/score/saveScoring',
                result: '/score/scoreResult',
            }
        }
    },
    watch: {
        $route: {
            handler(to, from) {
                //深度监听，同时也可监听到param参数变化
                this.$nextTick(() => {
                    this.queryParam.appraiserPhone = store.getters.userInfo.mobile
                    this.queryParam.assessedId = to.query.assessedId
                    this.queryParam.questionId = to.query.questionId
                    if (this.queryParam.appraiserPhone && this.queryParam.assessedId && this.queryParam.questionId) {
                        this.getList()
                    }
                })
            },
            deep: true,
            // 代表在wacth里声明了这个方法之后立即先去执行handler方法
            immediate: true
        }
    },
    methods: {
        getList() {

            this.loading = true;
            getAction(this.url.getInfo, this.queryParam).then(res => {
                this.loading = false;
                if (!res.success) {
                    return this.$message.error(res.message);
                }
                this.dataForm = res.result;

                // 设置默认选项，统一按计分处理
                console.log(res.result.assessList.length)
                this.dataForm.assessList.forEach(item => {
                    item.newList = []
                    let itemSddessScore = item.assessScore.split(',')
                    let itemAssessItem = item.assessItem.split(',')
                    // item.scoreKey = itemSddessScore[0]; // 假设第一个值是默认值
                    if (item.scoreKey == '') {
                        item.scoreKey = itemSddessScore[0];
                    } else {
                        item.scoreKey = item.scoreKey;
                    }
                    itemSddessScore.forEach((item1, index1) => {
                        item.newList.push({
                            key: itemSddessScore[index1],
                            value: itemAssessItem[index1]
                        })
                    })
                });
                console.log('this.dataForm.assessList', this.dataForm.assessList)
            }).catch(() => {
                this.loading = false;
            });
        },
        showDialog() {
            this.visibleShow = true
            let model = {
                userId: store.getters.userInfo.mobile,
                userName: store.getters.userInfo.realName,
              zf: this.resultNum,

              userScore: this.dataForm.assessList.map(res => res.scoreKey).toString(),
                scoreTime: new Date().getTime(),
                reviewerId: this.dataForm.assessedId,
                reviewerName: this.dataForm.assessedName,
                questionId: this.dataForm.questionId
            }
            postAction(this.url.result, model).then(res => {
                this.resultNum = res.result
            }).catch(() => {
                this.$message.error(res.message)
            })
        },
        handleOk() {
            let checkedList = this.dataForm.assessList
            for (let i = 0; i < checkedList.length; i++) {
                if (!checkedList[i].scoreKey) {
                    return this.$Modal.warning({ content: '题目 ' + (i + 1) + ' 未作答，请完成后提交' })
                }
            }
            let model = {
                userId: store.getters.userInfo.mobile,
                userName: store.getters.userInfo.realName,
                zf: String(this.resultNum),
                userScore: this.dataForm.assessList.map(res => res.scoreKey).toString(),
                scoreTime: new Date().getTime(),
                reviewerId: this.dataForm.assessedId,
                reviewerName: this.dataForm.assessedName,
                questionId: this.dataForm.questionId
            }
          console.log(model)
            this.loading = true
            postAction(this.url.save, model).then(res => {
                this.loading = false
                if (res.success) {
                    this.disabled = true
                    this.$Modal.success({
                        content: res.message,
                        onOk: () => {
                            this.goList()
                        }
                    })
                } else {
                    this.visibleShow = false
                    this.$Modal.error({ content: res.message })
                }
            }).catch(() => {
                this.loading = false
            })
        },
        // changeRadio(event, item) {
        //   let indexOf = item.isRating != 1 ? item.assessScore.split(',').indexOf(event.target.value) :
        //       item.assessItem.split(',').indexOf(event.target.value)
        //   item.scoreValue = item.assessItem.split(',')[indexOf]
        // },
        changeRadio(event, item) {
            console.log('111', event.target.value)
            // console.log('888',item.assessItem.split(','),'777',event)
            // // 获取选择项的索引
            // let indexOf = item.assessItem.split(',').indexOf(event.target.value);
            // console.log('000',indexOf,'111', event.target.value,'222', item.assessScore.split(','))
            // // 将对应的数值分数赋值给scoreKey
            item.scoreKey = event.target.value;
            // console.log('999', item.scoreKey)

        },
        ...mapActions(["Logout"]),
        goList() {
            this.$router.push({ path: '/mobile/own-list' })
        },
        openDescription() {
            this.$Modal.info({
                content: this.dataForm.questionDescription
            })
        },
        goLogout() {
            const that = this
            that.Logout({}).then(() => {
                // window.location.reload()
                window.location.href = '/360renliceping/mobile/login'
            }).catch(err => {
                that.$message.error('错误')
            })
        },
    }
}
</script>

<style lang="less" scoped>
/deep/ .ant-radio-group {
    .ant-radio-button-wrapper {
        padding: 0;
        line-height: normal;
        border: 0.02rem solid rgba(166, 166, 166, 1);
        transition: all 0.3s ease;
        /* 添加过渡效果 */

    }

    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
        background-color: rgba(153, 153, 153, 1);
        border: 0.02rem solid rgba(166, 166, 166, 1);
        transform: scale(1.1);
        /* 选中时放大10% */
    }

    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
        color: #fff;
        /* 选中项的文字颜色 */
    }
}

.is-rating {
    position: absolute;
    top: 5px;
    right: 5px;
}

.is-rating a-button span {
    padding: 0 8px;
}
</style>
